<!--
 * @Author: your name
 * @Date: 2020-10-10 17:10:32
 * @LastEditTime: 2020-10-12 09:20:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_plugins\src\views\video\vueDplayer.vue
-->
<template>
    <div class="container">
        <van-nav-bar
            title="西瓜播放器dplayer"
            :border="false"
            fixed
            left-arrow
            @click-left="$router.go('-1')"
        />
        <div id="mse"></div>
    </div>
</template>

<script>
import Player from "xgplayer";
export default {
    mounted() {
        let player = new Player({
            id: "mse",
            autoplay: false,
            volume: 0.3,
            url: "http://static.smartisanos.cn/common/video/t1-ui.mp4",
            // poster: "https://camo.githubusercontent.com/0ade48acd75de2208c39e3c499f84c2fbfce47ba/687474703a2f2f692e696d6775722e636f6d2f323037636833362e6a7067",
            poster: require("../../assets/images/timg.jpg"),
            danmu: {
                comments: [
                    {
                        duration: 15000,
                        id: "1",
                        start: 3000,
                        txt: "长弹幕长弹幕长弹幕长弹幕长弹幕",
                        style: {
                            //弹幕自定义样式
                            color: "#ff9500",
                            fontSize: "20px",
                            border: "solid 1px #ff9500",
                            borderRadius: "50px",
                            padding: "5px 11px",
                            backgroundColor: "rgba(255, 255, 255, 0.1)",
                        },
                    },
                ],
                area: {
                    start: 0,
                    end: 1,
                },
            },
            playsinline: true,
            // height: window.innerHeight,
            width: window.innerWidth,
        });
    },
};
</script>

<style lang="less" scoped>
.container {
    padding-top: 100px;
}
</style>